<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :requestApi="getRoomTypeList" :pagination="false">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">创建户型</el-button>
        <el-button type="danger" @click="deleteApi(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
      </template>
      <template #create_time="{ row }">
        {{ dayjs(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #update_time="{ row }">
        {{ dayjs(row.update_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #opera="{ row }">
        <el-button link :icon="EditPen" @click="opera(row)">编辑</el-button>
        <el-button link :icon="Delete" @click="deleteApi([row.id])">删除</el-button>
      </template>
      <template #inShow="{ row }">
        <el-tag type="success" v-show="row.inShow">是</el-tag>
        <el-tag type="danger" v-show="!row.inShow">否</el-tag>
      </template>
    </ProTable>
    <el-dialog v-model="visible" title="标签设置">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="120">
        <el-form-item label="户型名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="排序值">
          <el-input-number v-model="formData.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="标识">
          <el-input-number v-model="formData.code" :max="100" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="是否进入搜索">
          <el-switch
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false"
            v-model="formData.inShow"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { onBeforeMount, ref } from "vue";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { getRoomTypeList, createRoomType, editRoomType, deleteRoomType } from "@/api/modules/room";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import dayjs from "dayjs";
import { useHandleData } from "@/hooks/useHandleData";

const initData: any = {
  name: "",
  sort: 1,
  inShow: false,
  code: 1
};

const formData = ref();

const rules: FormRules = {
  name: [
    { required: true, message: "户型名称是必须的" },
    { min: 1, max: 8, message: "字符在1-9个之间" }
  ],
  code: [{ type: "number", max: 100, min: 1 }]
};

const visible = ref(false);

const proRef = ref<InstanceType<typeof ProTable> | null>();

const deleteApi = async (ids: any) => {
  await useHandleData(deleteRoomType, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};

const columns: ColumnProps[] = [
  { prop: "sort", label: "排序值" },
  { prop: "name", label: "户型名称" },
  { prop: "code", label: "标识" },
  { prop: "inShow", label: "是否进入搜索" },
  { prop: "opera", label: "操作" }
];

const nowType = ref<"add" | "edit">("add");

const opera = (row: any) => {
  visible.value = true;
  if (!row) {
    formData.value = JSON.parse(JSON.stringify(initData));
    nowType.value = "add";
  } else {
    formData.value = JSON.parse(JSON.stringify(row));
    nowType.value = "edit";
  }
};

const formRef = ref<FormInstance>();

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      try {
        if (nowType.value === "add") {
          await createRoomType(formData.value);
        } else if (nowType.value === "edit") {
          await editRoomType(formData.value);
        }
        ElMessage.success("成功");
        await proRef.value?.getTableList();
        visible.value = false;
      } catch (error) {}
    }
  });
};

onBeforeMount(() => {
  formData.value = JSON.parse(JSON.stringify(initData));
});
</script>

<style></style>
